<!DOCTYPE html>
<html lang="en" xmls:th="http://www.thmeleaf.org" xmlns:xmls="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.10.2.min.js"></script>
    <style>

        table,td,th
        {
            border:1px solid black;
        }
        table
        {
            opacity:0.9;
            text-align: center;
            width:80%;
        }
        th
        {
            height:50px;
        }
        a.pos_fixed
        {
            position:fixed;
            top:30px;
            right:5px;
        }
        #header {
            margin-top: 10%;
        }

        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #333;
        }

        li {
            float: left;
        }

        li a {
            display: block;
            color: white;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
        }

        li a:hover {
            background-color: #111;
        }
    </style>
</head>
<body>
<br/>
<h1 style="position: absolute;top: 10%;left: 45%;">图书列表</h1>
<br/><br/>
<div id="header">
    <div>
        <table>
            <div class="form-group">
                <ul>
                    <li><a th:href="@{/book/toAdd}">新增图书信息</a></li>
                    <li><a th:href="@{/book/toAdd}">新增图书信息</a></li>
                    <li><a th:href="@{/book/toAdd}">新增图书信息</a></li>
                    <li><a th:href="@{/book/toAdd}">新增图书信息</a></li>
                </ul>
                <a th:href="@{/person/queryByName}" class="pos_fixed">个人信息</a>
                <thead>
                <tr>
                    <th>书本编号</th>
                    <th>图片</th>
                    <th>书本名字</th>
                    <th>书本出版社</th>
                    <th>书本作者</th>
                    <th>书本价格</th>
                    <th>删除图书信息</th>
                    <th>更新图书信息</th>
                    <th>购买该书</th>
                </tr>
                </thead>
            </div>
            <tbody>
            <!--each来进行for循环求值-->
            <tr th:each="book:${list}">
                <th scope="row" th:text="${book.id}"></th>
                <td><img src="" width="100px" id="you">
                    <div>
                        <input type="file" name="" id="" onchange="tobin(this)" value="">
                    </div>
                    <div style="position: absolute;z-index: -1;width: 0px;height: 0px;overflow: hidden;">
                        <canvas id="can" width="320px" height="240px"></canvas>
                    </div>
                </td>
                <td th:text="${book.name}" class="form-control"></td>
                <td th:text="${book.publish}" class="form-control" }></td>
                <td th:text="${book.auth}" class="form-control"></td>
                <td th:text="${book.price}" class="form-control"></td>
                <td><a th:href="@{/book/removeById(id=${book.id})}" class="form-control">delete</a></td>
                <td><a th:href="@{/book/queryById(id=${book.id})}" class="form-control">update</a></td>
                <td><a th:href="@{/book/buySuccess(id=${book.id})}" class="form-control">buy</a></td>
            </tr>

            </tbody>
        </table>
    </div>
</div>

</body>
<script type="text/javascript">
    function tobin(target) {
        //获取临时缓存图片的路径，并传递给“显示图片”
        var url = window.URL.createObjectURL(target.files.item(0));

        //制造一张图片，传入画布，让它在画布中画出来。
        var img1 = new Image();
        img1.src = url;

        //初始化捕捉元素
        var can = document.getElementById('can');
        var you = document.getElementById('you');
        var context = can.getContext("2d");

        //当图片制造完成后，执行函数
        img1.onload = function () {
            //因为canvas输出的二进制图片会根据当前canvas的大小而变形，所以要将图片原始尺寸取出，然后传递给canvas,这样就能保证输出的图片原始比例不变
            var nw = img1.naturalWidth;
            var nh = img1.naturalHeight;
            can.setAttribute('width', nw + 'px')
            can.setAttribute('height', nh + 'px')
            //图片原始比例
            console.log(nw, nh);
            //绘制进canvas
            context.drawImage(img1, 0, 0, nw, nh);

            //二进制流转化函数
            var bin = can.toDataURL("image/jpeg"); //bin值已经存放了二进制流


            //二进制流传入“显示图片”
            console.log(bin);
            you.src = bin;
        }
    }
</script>
</html>